
<style type="text/css">
	a{
		margin:0;
		padding:0;
		text-decoration:none;
	}
	a:hover{
		color:#30a3ff;
	}
	.h-vedio-listbox{
		width:100%;
		background:url("them/imgs/jb-bg.png") 0px 0px repeat;
		margin:0px;
		padding:0px;
		overflow:hidden;
	}
	.h-option{
		width:1198px;
		margin:0 auto;
		border:1px #ddd solid;
		margin-top:40px;
	}
	.opconSone li {
		float: left;
		height:55px;
		padding-left:15px;
		padding-right:15px;
		line-height:55px;
		font-size:14px;
		cursor: pointer;
	}
	.h-option .op1{
		float:left;
		width:128px;
		height:55px;
		text-align: center;
		line-height:54px;
		font-size:14px;
		cursor: pointer;
	}

	.op2-1{
		float:left;
		width:128px;
		height:55px;
		color: #000;
		text-align: center;
		line-height:54px;
		font-size:14px;
		cursor: pointer;
	}
	.h-option .op2{
		width:1069px;
		height:54px;
		border-left:1px #ddd solid;
		border-bottom:1px #ddd solid;
		color:#30a3ff;
	}
	.opCon {
		clear: both;
		margin-top:20px;
		overflow: hidden;
		animation: opa 0.5s;
	}
	@keyframes opa {
		0%  {
			opacity:0;
		}
		100% {
			opacity:1;
		}
	}
	@-o-keyframes opa {
		0%  {
			opacity:0;
		}
		100% {
			opacity:1;
		}
	}
	@-ms-keyframes opa {
		0%  {
			opacity:0;
		}
		100% {
			opacity:1;
		}
	}
	@-moz-keyframes opa {
		0%  {
			opacity:0;
		}
		100% {
			opacity:1;
		}
	}
	.opColor {
		background-color:#ffffff;
		color:#30a3ff;
		text-decoration: underline;
	}
	.op3{
		float:left;
		width:100%;
		background-color:#fff;
		position:relative;
	}
	.op3 span{
		width:70px;
		height:14px;
		font-size:14px;
		color:#000;
		margin-left:21px;
		float: left;
	}
	.all{
		display:inline-block;
		margin-left:48px;
	}
	.op3 a{
		font-size:14px;
	}
	.op3 .abox{
		float: right;
		width:986px;
		overflow:hidden;
	}
	.op3 .bbox{
		width:985px;
		margin-left:140px;
		border:1px #ddd solid;
		overflow:hidden;
		left:140px;
		top: 126px;
		background-color:#fafafa;
		margin-bottom:20px;
	}
	 .op3 .abox a{
		display:inline-block;
		margin-right:30px;
		font-size:14px;
		margin-bottom:10px;
	}
	.op3 .abox a b{
		font-weight:normal;
		display: block;
	}
	.op3 .bbox a{
		display:inline-block;
		margin-top:7px;
		margin-bottom: 7px;
		margin-left:20px;

	}
	.h-option a:hover{
		color:#30a3ff;
		text-decoration:underline ;
	}
	.search-btn{
		cursor: pointer;
	}
	.search-btn,.span,.input{
		float: left;
		margin-top:20px;
		margin-bottom:20px;
	}
	.h-option .op3 .span{
		margin-left: 45px;
		margin-right: 47px;
	}
	.input{
		width:350px;
		border-bottom:1px #ddd solid;
		left:140px;
		bottom:29px;
	}
	.input input{
		outline:none;
		border:none;
		margin-bottom:8px;
		font-size:12px;
		color:#bbb;
	}
	.search-btn{
		left:518px;
		width:61px;
		height:21px;
		background-color:#30a3ff;
		color:#fff;
		font-size:12px;
		text-align:center;
		line-height:21px;
		bottom:29px;
	}
	.h-listbox{
		width:1198px;
		margin:0 auto;
	}
	.h-list{
		margin-top:20px;
		float:left;
		width:870px;
		background-color:#fff;
		overflow: hidden;
		margin-bottom:30px ;
	}
	.h_right{
		margin-top:20px;
		float: right;
	}
	.h-hot{
		width:308px;
		height:551px;
		border:1px #dddddd solid;
		background-color:#fff;
	}
	.h-browse{
		width:308px;
		height:321px;
		border:1px #dddddd solid;
		background-color:#fff;
		margin-top:20px;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.list-top{
		width:870px;
		height:55px;
		border-bottom:1px #ddd solid;
	}
	.list-top ul li{
		display:inline-block;
		line-height:55px;
		margin-left:21px;
	}
	.list-top ul li span{
		color:#30a3ff;
		font-size:18px;
		margin-left:5px;
		margin-right:6px;
	}
	.list-top ul li a {
		height:15px;
		padding-right:35px;
		color:#000;
	}
	.list-top ul li.dateUp-false{
		margin-left:589px;
		background:url("them/imgs/bottom.png") 29px 23px no-repeat;
	}
	.list-top ul li.peopleNum-false{
		margin-left:20px;
		background:url("them/imgs/bottom.png") 29px 23px no-repeat;
		background-size:10px 10px;
	}
	.list-top ul li.dateUp-true{
		color: #30a3ff;
		margin-left:589px;
		background: url("them/imag/top-blue-arrow.png") no-repeat 29px 23px;
	}
	.list-top ul li.peopleNum-true{
		background: url("them/imag/top-blue-arrow.png") no-repeat 29px 23px;
		margin-left:20px;
		background-size:10px 10px;
	}
	.list-top ul li.dateUp-true a,.list-top ul li.peopleNum-true a{
		color: #30a3ff;
	}
	.list-top ul li .price{
		border-right:none;
	}
	.list-center {
		overflow: hidden;
	}
	.list-center ul li{
		margin:0;
		padding:0;
		line-height:none;
	}
	.list-center ul li ul.titleProPmt {
		left: 206px;
		position: absolute;
		top: 75px;
	}
	.list-center ul li ul.titleProPmt  li{
		border: 1px solid #ddd;
		padding-left:10px;
		padding-right:10px;
		float: left;
		margin-right: 10px;
	}
	.list-center ul li ul.titleProPmt  li:nth-child(1){
		color: #30a3ff;
		border:1px solid #30a3ff;
	}

	.list-center .bigbtn{
		display:inline-block;
		float:left;
		width:870px;
		height:169px;
		background-color:#fff;
		border-bottom:1px #ddd solid;
		position:relative;
		overflow:hidden;
	}

	.list-center .bigbtn:hover{
		background-color:#f8f8f8;
	}
	.list-center .bigbtn .bigImg img{
		position:absolute;
		width:158px;
		height:100px;
		left:21px;
		top:35px;
	}
	.list-center .bigbtn .title{
		position:absolute;
		left:209px;
		top:35px;
		font-size:16px;
		color:#000;
	}
	.list-center .bigbtn .author{
		position:absolute;
		left:209px;
		top:82px;
		font-size:12px;
		color:#999;
	}
	.list-center .bigbtn .company{
		position:absolute;
		left:326px;
		top:82px;
		font-size:12px;
		color:#999;
	}
	.list-center .bigbtn .add{
		position:absolute;
		left:209px;
		top:108px;
		font-size:12px;
		color:#666;
	}
	.list-center .bigbtn .num{
		position:absolute;
		left:311px;
		top:108px;
		font-size:12px;
		color:#666;
	}
	.list-center .bigbtn .evaluate{
		position:absolute;
		width:202px;
		height:16px;
		left:420px;
		top:108px;
		font-size:12px;
		color:#999;
		background-size:109px 16px;
		padding-left:123px;
	}
	.list-center .bigbtn .yesno{
		position:absolute;
		right:30px;
		top:35px;
		font-size:16px;
		color:#30a3ff;
	}
	.hottop{
		width:265px;
		height:53px;
		line-height:53px;
		padding-left:43px;
		overflow:hidden;
		background:url("them/imgs/zfx.png")14px 21px no-repeat;
		background-size:14px 14px;
		font-size:16px;
		color:#010101;
	}
	.hottop-border{
		width:309px;
		height:1px;
		background:url("them/imgs/jbborder.png") 0px 0px no-repeat;
		background-size:309px 1px;
	}
	.hotlist a{
		display: block;
		width:295px;
		height:60px;
		padding-left:13px;
		margin-bottom:20px;
		overflow:hidden;
	}
	.hotlist a:nth-child(1){
		margin-top:19px;
	}
	.hotlist a img{
		float:left;
		display:inline-block;
		width:94px;
		height:60px;
	}
	.hotlist a span{
		float: left;
		display:inline-block;
		width:170px;
		height:60px;
		margin-left:16px;
		font-size:14px;
		color:#666;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.browsetop{
		width:265px;
		height:53px;
		line-height:53px;
		padding-left:43px;
		overflow:hidden;
		background:url("them/imgs/zfx.png")14px 21px no-repeat;
		background-size:14px 14px;
		font-size:16px;
		color:#010101;
	}
	.browselist ul{
		margin-top:4px;
	}
	.browselist ul li{
		width:308px;
		height:15px;
		margin-top:16px;
		padding-left:33px;
		background:url("them/imgs/zfxss.png") 15px 5px no-repeat;
		background-size:5px 5px;
	}
	.browselist ul li a{
		display:inline-block;
		width:252px;
		height: 15px;
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	.DateBg {
		background:url("them/img/downIcon.gif") no-repeat;
	}
	.h-option .op3 .abox a.TwocataColor{
		color:#30a3ff;
		text-decoration: underline;
	}
	.TwocataColor{
		color:#30a3ff;
		text-decoration: underline;
	}
	.start {
		position:absolute;
		width:202px;
		height:16px;
		left: 436px;
		top: 110px;
	}
	.starCon{
		float: left;
		width:80px;
		height:21px;
		padding-right:15px;
	}

</style>

<div class="f-engMain-content">
	<div style="overflow:hidden;">
		<ul class="opconSone">
			<li style="text-align: right;width: 75px;margin-right: 20px;" >选择：</li>
			<li ng-class="{'opColor':tab==-1}" ng-click="all()">全部</li>
			<li ng-repeat="item in CityVideos" ng-class="{'opColor':tab==$index}" ng-click="tabones(item,$index)" ng-bind="item.tcName"></li>
		</ul>
		<div class="op3">
			<div class="opCon">
				<span>资格分类：</span>
				<a class="all" ng-class="{'TwocataColor':color==2}" ng-click="all()" href="javascript:;">全部</a>
				<div class="abox" id="WorkJust">
					<a href="javascript:;" ng-class="{TwocataColor: currentId == item.scId,select:$first}"  ng-repeat="item in WorkCousrse track by $index" ng-click="opThrennSwitch(item)">
						{{ item.scName}}
					</a>
				</div>
				<div ng-show="showCOn==1" ng-if="ThreeList.length!=0" style="top:111px" class="bbox" id="ThreeCourseSwitch">
					<a  ng-click="ThreeCourseSwitch(item)" ng-class="{TwocataColor: currentId3 == item.dcId}" href="javascript:;" ng-repeat="item in ThreeList track by $index">
						{{ item.dcName }}
					</a>
				</div>

			</div>
		</div>
	</div>

</div>



<div class="h-vedio-listbox">
	<div class="h-listbox">
		<div class="h-list">
			<div class="list-top">
				<ul>
					<li>共<span ng-bind="totalItem"></span>个课程</li>
					<li ng-click="DateColor()"  class="dateUp-{{ isDisabled }}"><a href="javascript:;" style="border-right:1px #ddd solid;">时间</a></li>
					<li ng-click="peopleColor()"  class="peopleNum-{{ peopecolor }}"><a href="javascript:;">人气</a></li>
				</ul>
			</div>
			<div class="list-center">
				<no-content conf-type="'course'" ng-if="courseList.length == 0"></no-content>
				<ul class="ListCon">
					<li  ng-repeat="item in courseList">
						<!--id="{{ item.courseId }}"-->
						<a target="_blank"  class="bigbtn">
							<div class="bigImg" ng-click="goTo(item)"><img src="them/imag/noSrc.png" ng-src="{{ item.previewPath }}" alt="课程预览图片" /></div>
							<div class="title" ng-click="goTo(item)" >{{ item.title }}</div>
							<ul class="titleProPmt">
								<li ng-repeat="item2 in item.labelList"  ng-bind="item2.labelName" ng-click="linkSearch(item2.labelName)"></li>
							</ul>
							<div class="add"><span ng-bind="item.size"></span>个视频</div>
							<div class="num"><span ng-bind="item.visitCount"></span>人在学习</div>
							<div class="start">
								发布时间:<span style="padding-left:5px;" ng-bind="item.createTime|dateFilter"></span>
							</div>
							<div class="yesno">
								<span ng-show="item.price==0">免费</span>
								<span ng-show="item.price!=0" ng-bind="item.price"></span>
							</div>

						</a>
					</li>
				</ul>
			</div>
			<div class="list-bottom">

				<ui-pagination  ng-if="paginationConf" conf="paginationConf"></ui-pagination>
			</div>
		</div>
		<div class="h_right">
			<div class="h-hot">
				<div class="hottop">热门推荐</div>
				<div class="hottop-border"></div>
				<div class="hotlist">
					<a target="_blank"  class="hotcouseId" ng-repeat="item in hotCouse track by $index"  ng-click="goTo(item)">
						<img src="them/imag/noSrc.png" ng-src="{{ item.previewPath }}" alt="热门推荐"/>
						<span ng-bind="item.title"></span>
					</a>

				</div>
			</div>
			<div class="h-browse">
				<div class="browsetop">最近浏览</div>
				<div class="hottop-border"></div>
				<div class="browselist">
					<ul>
						<li class="recentId" ng-repeat="item in recentDate track by $index"  ng-click="goTo(item)">
							<a ng-bind="item.title"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</div>
